Widgets Quick Start Guide
Qrvey provides developers with a comprehensive set of “Widgets” to allow them to seamlessly embed Qrvey’s self-service data collection, automation, or analytics functionalities to power their applications. Widgets are directly embedded into web applications using simple Javascript and custom HTML tags. Qrvey Widgets are available for embedding various front-end application features, including Web Form builders (Survey, Quiz, Forms, etc), Data Visualizations for both creating and consuming charts and report outputs, and more.
All of the widgets can be embedded using two distinct ways to handle authentication:
The API key method
The JWT method
It is important to note that the first method of using API keys is solely for trial purposes and should not be used in production, as it exposes security risks.
All CodePen samples use the first method and can be copied and edited to use your own API key and other case-specific attributes, such as IDs, in order to experiment with the widget and see its behavior. Please see the article on Embedding Widgets Using Security Tokens for the proper production implementation.
Getting Started
It is a good idea to familiarize yourself with the Qrvey Composer’s UI and functionality before starting to use widgets, as many of the widgets are actually part of the Qrvey Composer and perform the same function. Therefore it is recommended that those ties are fully understood to enable you a seamless integration and provide the best user experience for your users.
The general structure of every widget includes:
The widget HTML tag
A JSON config object that defines all of the widget’s configuration and features
The script tag for the widget launcher
This entire code can be copied from the Qrvey Composer UI where the widget is sourced. You can find the information on where to find this code for each widget in the respective article, but generally it can be copied either from a command in the three-dot menu or a </> button in the widget UI in the Qrvey Composer.